<template>
  <!-- 
       写的背景颜色为红色，如需更改背景颜色或者字体颜色可在引入的组件内进行修改
       只适用于首页上方十个 二级页面使用
       引入组件 <navbar-view></navbar-view>
    -->
  <div class="navbar">
    <div class="navbar_box">
      <!-- 左边返回按钮 -->
      <img
        class="left"
        @click="$router.go('/home')"
        src="@/assets/imgs/user_colin/return.png"
        alt=""
      />
      <!-- 定义一个插槽，里边为标题名字 -->
      <slot class="title"></slot>
      <!-- 右边搜索按钮 -->
      <img class="right" src="@/assets/imgs/user_colin/search.png" alt="" />
    </div>
  </div>
  <div class="navbar_margin"></div>
</template>
<style lang="scss" scoped>
.navbar {
  box-sizing: border-box;
  position: fixed;
  padding-top: 0.2rem;
  top: 0;
  z-index: 99999;
  width: 7.5rem;
  height: 1.75rem;
  background: #d84141;
  font-size: 0.35rem;
  font-weight: 400;
  color: #333333;
  .navbar_box {
    position: absolute;
    bottom: 0.25rem;
    left: 0.3rem;
    width: 6.9rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      width: 0.2rem;
      height: 0.35rem;
    }
    .title {
      text-align: center;
      line-height: 0.3rem;
    }
    .right {
      width: 0.3rem;
      height: 0.3rem;
    }
  }
}
.navbar_margin {
  margin-top: 1.75rem;
}
</style>
